<script setup lang="ts">
import { inject, reactive, watch } from 'vue';
import {myStore} from '@/store/my'
import { Toast } from 'vant';
import { itemEditAPI, itemAddAPI } from '@/api/my'
const store = myStore()

const props = defineProps({
    item: {
        type: Object
    }
})
const { closeChange } = inject('popup')
const state = reactive({
    showItemStartTime: false,
    showItemEndTime: false,
    
    itemName: '',
    startTime: '',
    endTime: '',
    itemDes: '',
    minDate: new Date(1995,1,1), // 最小日期
    maxDate: new Date(), // 最大日期（当前日期）
})
// 回显数据
const setInfo = () => {
    if (Object.keys(props.item).length !== 0) {
        state.startTime = props.item.project_start_time
        state.endTime = props.item.project_end_time
        state.itemDes = props.item.project_duty
        state.itemName = props.item.project_name
    }
}

// 监控item变化 避免出现上次数据
watch(()=> props.item, () => {
    setInfo()
})
setInfo()

// 保存按钮
const submit = async() => {
    if (!state.endTime && !state.startTime) {
        Toast('请填写项目时间')
        return
    }
    if (!state.itemDes) {
        Toast('请填写项目职责')
        return
    }
    if (!state.itemName) {
        Toast('请填写项目名称')
        return
    }
    // 判断添加还是修改
    if (props.item.project_id) {
        const res = await itemEditAPI({
            "project_duty": state.itemDes, 
            "project_end_time": state.endTime, 
            "project_name": state.itemName, 
            "project_start_time": state.startTime, 
            "id": props.item.project_id
        })
        if (res) {
            closeChange()
            Toast('修改成功')
        }else{
            Toast('修改失败')
        }
    }else {
        const res = await itemAddAPI({
            "project_duty": state.itemDes, 
            "project_end_time": state.endTime, 
            "project_name": state.itemName, 
            "project_start_time": state.startTime, 
            "uuid": props.item.uuid
        })
        if (res) {
            closeChange()
            Toast('添加成功')
        }else{
            Toast('添加失败')
        }
    }
}
// 选择开始项目时间
const ItemStartTimeConfirm = (val) => {
    state.startTime = val.getFullYear() + '-' + (val.getMonth()+1) + '-' + val.getDate()
    state.showItemStartTime = false
}
// 选择结束项目时间
const ItemEndTimeConfirm = (val) => {
    state.endTime = val.getFullYear() + '-' + (val.getMonth()+1) + '-' + val.getDate()
    state.showItemEndTime = false
}
</script>
<template>
    <van-nav-bar
        title="项目经历"
        left-arrow
        @click-left="closeChange"
    />
    <div class="position-list">
        <div class="user-item">
            <h5>项目名称</h5>
            <van-field
                v-model="state.itemName"
                placeholder="请填写您的项目名称"
            />
        </div>
        <div class="user-item">
            <h5>完成项目时间</h5>
            <div class="work-time-list">
                <van-field
                    v-model="state.startTime"
                    placeholder="请选择"
                    readonly
                    @click="state.showItemStartTime=true"
                />
                <!-- 项目开始时间 -->
                <van-action-sheet v-model:show="state.showItemStartTime">
                    <van-datetime-picker
                        type="date"
                        title="选择年月日"
                        :min-date="state.minDate"
                        :max-date="state.maxDate"
                        @confirm="ItemStartTimeConfirm"
                        @cancel="state.showItemStartTime=false"
                    />
                </van-action-sheet>
                <span>—</span>
                <van-field
                    v-model="state.endTime"
                    placeholder="请选择"
                    readonly
                    @click="state.showItemEndTime=true"
                />
                <!-- 项目结束时间 -->
                <van-action-sheet v-model:show="state.showItemEndTime">
                    <van-datetime-picker
                        type="date"
                        title="选择年月日"
                        :min-date="state.minDate"
                        :max-date="state.maxDate"
                        @confirm="ItemEndTimeConfirm"
                        @cancel="state.showItemEndTime=false"
                    />
                </van-action-sheet>
            </div>
        </div>
        <div class="user-item">
            <h5>项目职责</h5>
            <van-field
                v-model="state.itemDes"
                placeholder="请填写您的项目内容"
                type="textarea"
                rows="10"
                autosize
            />
        </div>
        <button class="wy-submit" @click="submit">完成</button>
    </div>
</template>


<style scoped>
  .position-list{
    margin: 1.52rem 0.67rem 0;
  }
  .work-time-list {
    display: flex;
    align-items: center;
  }
  .work-time-list span {
    width: 0.83rem;
    height: 0.05rem;
    margin-right: 2.4rem;
    font-weight: 300;
    font-size: 0.8rem;
    color: #333333;
    line-height: 0.34rem;
  }
</style>